<template>
  <div class="content">
    <div class="div-head">
      <h3>修改</h3>
    </div>
    <div class="div-info">
      <el-form
        :model="form"
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 1 -->
        <el-row>
          <el-col :span="7">
            <el-form-item label="*登录账号">
              <el-input v-model="form.user"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="*真实姓名">
              <el-input v-model="form.relName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 2 -->
        <el-row>
          <el-col :span="7">
            <el-form-item label="*登录密码">
              <el-input v-model="form.pass" show-password class="log"></el-input>
              不修改请留空!
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="*重复密码">
              <el-input v-model="form.pass" show-password class="log"></el-input>
               不修改请留空!
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 3 -->
        <el-row>
          <el-col :span="7">
            <el-form-item label="*所在部门">
              <el-select
                v-model="value"
                clearable
                placeholder="请选择"
                class="selectBox"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-button @click="open" type="success" icon="el-icon-circle-plus"
                >新增</el-button
              >
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="*角色权限">
              <el-select
                v-model="value2"
                clearable
                placeholder="请选择"
                class="selectBox"
              >
                <el-option
                  v-for="item in optionsRoot"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-button @click="open" type="success" icon="el-icon-circle-plus"
                >新增</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 4 -->
        <el-row>
          <el-col :span="7">
            <el-form-item label="客户数量限制">
              <el-input v-model="form.customerLimit" class="limit"></el-input
              >0为不限制
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="员工提成">
              <el-input v-model="form.ticheng" class="limit"></el-input>
              %(允许数值为0.01%-100%)
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 5 -->
        <el-row>
          <el-col :span="7">
            <el-form-item label="头像">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                list-type="picture"
              >
                <el-button size="small" type="primary">选择文件</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="头像预览"> </el-form-item>
          </el-col>
        </el-row>
        <!-- 6 -->
        <el-row>
          <el-col :span="7">
            <el-form-item label="手机号码">
              <el-input v-model="form.telphone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="Email">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 7 -->
        <el-row>
          <el-col :span="7">
            <el-form-item label="性别">
              <el-radio v-model="form.radio" label="1">男</el-radio>
              <el-radio v-model="form.radio" label="2">女</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="生日">
              <el-date-picker
                v-model="form.value1"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 8 -->
        <el-row class="footBtn">
            <el-button type="primary" @click="btnSave">保存</el-button>
              <el-button type="info" @click="btnClose">关闭</el-button>
        </el-row>
      </el-form>
    </div>
  </div>
</template>


<script>
export default {
  name: "AddStaff",
  data() {
    return {
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      form: {
        user: "", // 账号
        relName: "", //真实姓名
        pass: "", //密码
        customerLimit: 0, //客户数量限制
        ticheng: 0, //提成
        telphone: "", // 手机号码
        email: "", // 电子邮箱
        radio: "1", // 男女单选
         value1: '', //生日 日期选择
      },
      options: [
        {
          value: "选项1",
          label: "请选择",
        },
        {
          value: "选项2",
          label: "总经办",
        },
        {
          value: "选项3",
          label: "业务一部",
        },
        {
          value: "选项4",
          label: "业务二部",
        },
        {
          value: "选项5",
          label: "渠道招商部",
        },
        {
          value: "选项6",
          label: "营销部",
        },
        {
          value: "选项7",
          label: "采购部",
        },
        {
          value: "选项8",
          label: "财务部",
        },
        {
          value: "选项9",
          label: "客服部",
        },
      ],
      value: "",
      optionsRoot: [
        {
          value2: "选项1",
          label: "超级管理员",
        },
        {
          value2: "选项2",
          label: "总经理",
        },
        {
          value2: "选项3",
          label: "部门主管",
        },
        {
          value2: "选项4",
          label: "销售员",
        },
        {
          value2: "选项5",
          label: "客服人员",
        },
        {
          value2: "选项6",
          label: "售后人员",
        },
      ],
      value2: "",
    };
  },
  methods: {
    open() {
      this.$prompt("新增部门", "新增部门", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.$message({
            type: "success",
            message: "你新增的部门是 " + value,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
  },
};
</script>

<style>
.selectBox {
  width: 150px;
}
.limit {
  width: 100px;
}
.footBtn{
  margin-left: 270px;
}
.log{
  width: 180px;
}
</style>